{% extends 'html5_base.html' %}

{% block title %}
Maze
{% endblock %}

{% block stylesheet %}
{{ block.super }}
{% endblock%}

{% block javascript %}
{{ block.super }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/*
 * http://www.devirtuoso.com/2009/09/object-oriented-programming-with-javascript/
 * http://www.dev102.com/2008/10/14/object-oriented-programming-with-javascript/
 * https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
 * http://www.pagecolumn.com/javascript/setinterval.htm
 */
$(document).ready(function() {

    var MAP =	"";
    MAP += "22222222222222222222@";
    MAP += "2                  2@";
    MAP += "2 2 222222 2222222 2@";
    MAP += "2 2           2222 2@";
    MAP += "2 22222222222 2222 2@";
    MAP += "2          22  222 2@";
    MAP += "2 22222222 222     2@";
    MAP += "2 22222222 2222222 2@";
    MAP += "2 222222           2@";
    MAP += "2  22222 222222222 2@";
    MAP += "22 22222 2       2 2@";
    MAP += "22 22222 2 22222 2 2@";
    MAP += "22       2 22    2 2@";
    MAP += "2  22222 2 22 22 2 2@";
    MAP += "2 222222      22 2 2@";
    MAP += "2 22222222222222 2 2@";
    MAP += "2 22             2 2@";
    MAP += "2 22 222222 222222 2@";
    MAP += "2    222222        2@";
    MAP += "22222222222222222222@";

    var BLOCK = "2";
    var WAY = " ";

    function MazeGame () {
        this.cwidth = 400;
        this.cheight = 400;
        this.blockSize = 20;
        this.mentoces = [];
        this.mentoce = new Image();
        this.mentoce.src = '{% url html5_static "image/mentoce.jpg"%}';
        this.canvas = $("#canvas");
        this.ctx = canvas.getContext("2d");

        this.player = null;
        this.monsters = [];

        this.init = function(player, monsters, blockSize) {
            this.blockSize = blockSize;
            this.cwidth = MAP.split("@")[0].length * this.blockSize;
            this.cheight = MAP.split("@") * this.blockSize;
            this.player = player;
            this.monsters = monsters;
            this.buildMap();
            this.player.display();
        };
        this.display = function() {
            this.buildMap();
        };
         this.getSymbol = function(x, y) {
            return MAP.split("@")[y / this.blockSize].charAt(x / this.blockSize)
        };
        this.buildMap = function() {
            this.ctx.clearRect(0, 0, this.cwidth, this.cheight);
            var y = 0;
            var x = 0;
            for (var i=0; i<MAP.length; i++) {
                if (MAP.charAt(i) == "@") {
                    y += this.blockSize;
                    x = 0;
                    i += 1;
                }
                this.drawBlock(i, x, y);

                if (MAP.charAt(i) == WAY) {
                    this.ctx.drawImage(this.mentoce, x, y, this.blockSize, this.blockSize);
                    this.mentoces.push({"x":x, "y": y});
                }
                x += this.blockSize;
            }
        };
        this.drawBlock = function(i, x, y) {
            var c = MAP.charAt(i);
            if (c == BLOCK) {
                this.ctx.fillStyle = "#75b3f5";
                this.ctx.fillRect(x, y, this.blockSize, this.blockSize);
            }
        };
        this.displayMentocesWay = function() {
            var p = null;
            for (var i=0; i<this.mentoces.length; i++) {
                p = this.mentoces[i];
                this.ctx.drawImage(this.mentoce, p["x"], p["y"], this.blockSize, this.blockSize);
            }
        };
        this.displayMentoce = function(x, y) {
            if(this.checkMentoce(x, y)) {
                this.ctx.drawImage(this.mentoce, x, y, this.blockSize, this.blockSize);
            } else {
                this.ctx.clearRect(x, y, this.blockSize, this.blockSize);
            }
        };
        this.popMentoces = function(x, y) {
            var p = {'x': x, 'y':y};
            var n = this.mentoces;
            for (var i=0; i<n.length; i++) {
                if (p["x"] == n[i]["x"] && p["y"] == n[i]["y"]) {
                    this.mentoces.splice(i, 1);
                    break;
                }
            }
        };
        this.checkMentoce = function(x, y) {
            var p = {'x': x, 'y':y};
            var n = this.mentoces;
            for (var i=0; i<n.length; i++) {
                if (p["x"] == n[i]["x"] && p["y"] == n[i]["y"]) {
                    return true;
                }
            }
            return false;
        };
        this.checkEnd = function() {
            if(this.mentoces.length == 0) {
                alert("Game over. Enjoy real Google Pakman.");
                window.location ="http://www.google.com/pacman/";
                return;
            }

            for(var i=0; i<this.monsters.length; i++) {
                if(this.monsters[i].currentX == this.player.currentX &&
                    this.monsters[i].currentY == this.player.currentY){
                        alert("Game over. Enjoy real Google Pakman.");
                        window.location ="http://www.google.com/pacman/";
                        return;
                    }
            }
        };
        this.movePlayer = function(x, y) {
            this.displayMentocesWay();
            this.player.move(x, y, this);
            this.player.display();
            for(var i=0; i<this.monsters.length; i++) {
                this.monsters[i].display();
            }
        };
        this.moveMonsters = function() {
            this.displayMentocesWay();
            for(var i=0; i<this.monsters.length; i++) {
                this.monsters[i].display();
            }
            this.player.display();
            this.checkEnd();
        };
        this.go = function(){
            var closure = this.bind(this.moveMonsters);
            this.t = setInterval(closure, 20);
        };
        this.bind = function( Method ){
            var _this = this;
            return(
                 function(){
                    return( Method.apply( _this, arguments ) );
                 }
            );
        };
    }

    function Player() {
        this.currentX = 20;
        this.currentY = 360;
        this.lastCurrentX = 0;
        this.lastCurrentY = 0;
        this.mazeGame = null;
        this.player = new Image();
        this.player.src = '{% url html5_static "image/poo.png"%}';
        this.z = 0;
        this.canvas = $("#canvas");
        this.ctx = canvas.getContext("2d");

        this.init = function(x, y, mazeGame) {
            this.currentX = x;
            this.currentY = y;
            this.lastCurrentX = x;
            this.lastCurrentY = y;
            this.mazeGame = mazeGame;
        };
        this.getSymbol = function(x, y) {
            return MAP.split("@")[y / this.blockSize].charAt(x / this.blockSize)
        };
        this.move = function(x, y) {
            var newX = this.currentX + x;
            var newY = this.currentY + y;
            // Block
            if (this.mazeGame.getSymbol(newX, newY) == BLOCK) {
                return;
            }
            if (this.mazeGame.getSymbol(newX, newY) == WAY) {
                this.lastCurrentX = this.currentX;
                this.lastCurrentY = this.currentY;
                if (x > this.mazeGame.cwidth - this.mazeGame.blockSize) {
                    x = this.mazeGame.cwidth - this.mazeGame.blockSize;
                    this.currentX = newX;
                } else if (newX < 0) {
                    this.currentX = 0;
                } else {
                    this.currentX = newX;
                }

                if (y > this.mazeGame.cheight - this.mazeGame.blockSize) {
                    y = this.mazeGame.cheight - this.mazeGame.blockSize;
                    this.currentY = newY;
                } else if  (newY < 0) {
                    this.currentY = 0;
                } else {
                    this.currentY = newY;
                }
                this.mazeGame.popMentoces(this.currentX, this.currentY);
            }
        };
        this.display = function() {
            this.ctx.clearRect(this.lastCurrentX, this.lastCurrentY, this.mazeGame.blockSize, this.mazeGame.blockSize);
            this.ctx.drawImage(this.player, this.currentX, this.currentY, this.mazeGame.blockSize, this.mazeGame.blockSize);
        }
    }

    function Monster() {
        this.currentX = 0;
        this.currentY = 0;
        this.lastCurrentX = 0;
        this.lastCurrentY = 0;
        this.speed = 0;
        this.mazeGame = null;
        this.monsterImage = new Image();
        this.monsterImage.src = '{% url html5_static "image/monster.png"%}';
        this.canvas = $("#canvas");
        this.ctx = canvas.getContext("2d");
        this.t = 0;

        this.init = function(x, y, speed, mazeGame) {
            this.currentX = x;
            this.currentY = y;
            this.lastCurrentX = x;
            this.lastCurrentY = y;
            this.speed = speed;
            this.mazeGame = mazeGame;
        };
        this.checkMyWay = function(x, y) {
            if (x == this.lastCurrentX && y == this.lastCurrentY) {
                return false;
            }
            if (this.mazeGame.getSymbol(x, y) != BLOCK) {
                return true;

            }
            return false;
        };
        this.move = function() {
            var nextSteps = [
                            [this.currentX + this.mazeGame.blockSize, this.currentY],
                            [this.currentX, this.currentY + this.mazeGame.blockSize],
                            [this.currentX - this.mazeGame.blockSize, this.currentY],
                            [this.currentX , this.currentY - this.mazeGame.blockSize],
                            ];
            var nextStep = [];
            while(true) {
                 nextStep = nextSteps[Math.floor(Math.random()*4)];
                 if (this.checkMyWay(nextStep[0], nextStep[1])){
                    this.lastCurrentX = this.currentX;
                    this.lastCurrentY = this.currentY;
                    this.currentX = nextStep[0];
                    this.currentY = nextStep[1];
                    return;
                 }
            }

        };
        this.display = function() {
            this.mazeGame.displayMentoce(this.lastCurrentX, this.lastCurrentY);
            this.ctx.drawImage(this.monsterImage, this.currentX, this.currentY, this.mazeGame.blockSize, this.mazeGame.blockSize);
        }
        this.go = function(){
            var closure = this.bind(this.move);
            this.t = setInterval(closure, this.speed);
        };
        this.bind = function( Method ){
            var _this = this;
            return(
                 function(){
                    return( Method.apply( _this, arguments ) );
                 }
            );
        };
    }

    var mazeGame = new MazeGame();

    var player = new Player();
    player.init(20, 360, mazeGame);

    var monster1 = new Monster();
    monster1.init(360, 360, 200, mazeGame);
    monster1.go();

    var monster2 = new Monster();
    monster2.init(360, 20, 500, mazeGame);
    monster2.go();

    var monster3 = new Monster();
    monster3.init(20, 20, 200, mazeGame);
    monster3.go();

    var monster4 = new Monster();
    monster4.init(20, 20, 200, mazeGame);
    monster4.go();


    var monsters = [monster1, monster2, monster3, monster4];

    mazeGame.init(player, monsters, 20);
    mazeGame.go()

    document.onkeydown = function (event) {
        var keyCode;
        var x = 0;
        var y = 0;
        if (event == null) {
            keyCode = window.event.keyCode;
        }
        else {
            keyCode = event.keyCode;
        }
        switch (keyCode) {
            // left
            case 37:
                mazeGame.movePlayer(-mazeGame.blockSize, 0);
                break;
            // up
            case 38:
                mazeGame.movePlayer(0, -mazeGame.blockSize);
                break;
            // right
            case 39:
                mazeGame.movePlayer(mazeGame.blockSize, 0);
                break;
            // down
            case 40:
                mazeGame.movePlayer(0, mazeGame.blockSize);
                break;
            default:
                break;
        }
    }

});
</script>
{% endblock%}

{% block content %}

<img src='{% url html5_static "image/poo.jpg" %}'>
<canvas id="canvas" height="400" width="400"></canvas>

{% endblock %}